<template>
    <div>
        <v-btn v-hasPermi="['update-user-admin']" prepend-icon="mdi-plus-box" color="green" @click="addClickListener">添加用户</v-btn>
    </div>
    <v-data-table-server :hover="true" :fixed-header="true" :loading="listLoading" :headers="headers" :items="tableList"
        :height="tableHeight" item-value="userId" show-select v-model:items-per-page="userQuery.pageSize"
        :items-length="total" @update:options="loadItems" items-per-page-text="每页数据量"
        :items-per-page-options="[10, 20, 30, 40, 50, 100]">
        <template v-slot:item.status="{ item }">
            <v-chip :color="item.status == 1 ? 'primary' : 'red'">
                {{ item.status == 1 ? '正常' : '禁用' }}
            </v-chip>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-pencil-outline" @click="updateUserDialog(item)"></v-icon>
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-delete-outline" @click="deleteUserDialog(item)"></v-icon>
        </template>
    </v-data-table-server>
    <v-dialog persistent v-model="dialogActionConfig.showDialog" max-width="1000">
        <v-card prepend-icon="mdi-account" :title="dialogActionConfig.title">
            <v-card-text>
                <v-form :readonly="dialogActionConfig.disable">
                    <v-text-field color="primary" v-model="userForm.username" label="用户名"></v-text-field>
                    <v-text-field color="primary" v-model="userForm.nickname" label="昵称"></v-text-field>
                    <v-text-field color="primary" type="password" v-model="userForm.passwordTemp" label="密码"></v-text-field>
                    <v-autocomplete label="角色" :items="roleList" item-title="roleName" item-value="roleId" chips
                        v-model="userForm.roleIdArray" color="primary" clearable/>
                    <v-radio-group label="状态" inline v-model="userForm.status" color="primary">
                        <v-radio :value="1" label="正常" />
                        <v-radio :value="0" label="禁用" />
                    </v-radio-group>
                </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="取消" variant="plain" @click="closeDialog"></v-btn>
                <v-btn color="primary" text="保存" variant="tonal" @click="confirm"></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { getAccountDetailList, getRoleList, simpleAccountCurd } from '@/api/adminAccount';
import { formatTimestamp } from '@/util/ruoyi';

export default {
    data() {
        return {
            headers: [
                { title: "用户ID", align: "start", key: "userId", width: '100' },
                { title: "用户名", align: "start", key: "username" },
                { title: "昵称", align: "start", key: "nickname" },
                { title: "密码", align: "start", key: "secrecy" },
                { title: "角色", align: "start", key: "roleArray" },
                { title: "状态", align: "start", key: "status" },
                { title: "创建日期", align: "start", key: "createAtStr" },
                { title: "操作", align: "start", key: "actions" },
            ],
            userQuery: {
                pageSize: 20,
                pageNum: 1,
            },
            userForm: { status: 1 },
            tableHeight: 300,
            total: 0,
            listLoading: false,
            tableList: [],
            roleList: [],
            dialogActionConfig: {
                showDialog: false,
                disable: false,
                title: '',
                loading: false
            }
        }
    },
    mounted() {
        this.tableHeight = window.innerHeight - 64 - 48 - 36 - 75;
        this.getRoleList()
    },
    methods: {
        loadItems({ page, itemsPerPage }) {
            this.listLoading = true;
            this.userQuery.pageNum = page;
            this.userQuery.pageSize = itemsPerPage;
            getAccountDetailList(this.userQuery).then(resp => {
                this.dataHandle(resp.rows)
                this.listLoading = false
                this.total = resp.total
            })
        },
        dataHandle(userList) {
            this.tableList = []
            if (userList == null) return
            userList.forEach(userItem => {
                let user = {}
                user.userId = userItem.userId
                user.username = userItem.username
                user.nickname = userItem.nickname
                user.secrecy = '**********'
                if (userItem.roleObjectArray != null && userItem.roleObjectArray.length > 0) {
                    user.roleArray = userItem.roleObjectArray[0].remark
                    user.roleIdArray = userItem.roleObjectArray.map(roleObj => roleObj.roleId)
                }
                user.createAtStr = formatTimestamp(userItem.createAt);
                user.createAt = userItem.createAt
                user.password = null
                user.status=userItem.status
                this.tableList.push(user)
            });
        },
        getRoleList() {
            getRoleList({}).then(resp => {
                this.roleList = resp.rows
            })
        },
        confirm() {
            this.userForm.curdAction = this.dialogActionConfig.action
            this.dialogActionConfig.disable = true
            if(this.userForm.passwordTemp!=null)this.userForm.password=btoa(this.userForm.passwordTemp)
            simpleAccountCurd(this.userForm).then(resp => {
                this.dialogActionConfig.disable=false
                if (resp.code === 1) {
                    this.closeDialog()
                    this.loadItems({ page: this.userQuery.pageNum, itemsPerPage: this.userQuery.pageSize })
                }
            }).catch(() => this.dialogActionConfig.disable = false)
        },
        addClickListener() {
            this.dialogActionConfig.title = '添加用户'
            this.dialogActionConfig.action = 'save'
            this.dialogActionConfig.showDialog = true
        },
        updateUserDialog(data) {
            this.userForm = data
            if(data.roleIdArray!=null)this.userForm.roleIdArray=data.roleIdArray[0]
            this.dialogActionConfig.title = '编辑用户：' + data.username
            this.dialogActionConfig.action = 'update'
            this.dialogActionConfig.showDialog = true
        },
        deleteUserDialog(data) {
            this.userForm = data
            if(data.roleIdArray!=null)this.userForm.roleIdArray=data.roleIdArray[0]
            this.dialogActionConfig.title = '删除用户：' + data.username
            this.dialogActionConfig.action = 'delete'
            this.dialogActionConfig.showDialog = true
            this.dialogActionConfig.disable=true
        },
        closeDialog() {
            this.userForm = { status: 1 }
            this.dialogActionConfig = { action: 'save', title: '添加用户', showDialog: false }
        },
    },
}
</script>

<style></style>